@use '../variables';
@use '../mixins';

@include mixins.b(textarea) {
  display: block;
  width: 100%;
  padding: 7px calc(var(--horizontal-space) - 1px);
  margin: 0;
  font: inherit;
  font-size: var(--font-size);
  color: var(--#{variables.$prefix}color-text);
  letter-spacing: inherit;
  appearance: none;
  caret-color: var(--#{variables.$prefix}color-primary);
  resize: vertical;
  background-color: var(--#{variables.$prefix}background-color-input);
  border: 1px solid var(--#{variables.$prefix}color-border);
  border-radius: var(--#{variables.$prefix}border-radius);
  outline: none;
  transition: border-color var(--#{variables.$prefix}animation-duration-base) linear;

  &::placeholder {
    color: var(--#{variables.$prefix}color-disabled);
  }

  &:disabled {
    color: var(--#{variables.$prefix}color-disabled);
    pointer-events: none;
    background-color: var(--#{variables.$prefix}background-color-disabled);

    &::placeholder {
      opacity: 0.5;
    }
  }

  &:hover,
  &:focus {
    border-color: var(--#{variables.$prefix}color-light-primary);
  }

  @each $invalid, $color in ('warning': 'warning', 'error': 'danger') {
    &[data-l-form-invalid='#{$invalid}'] {
      caret-color: var(--#{variables.$prefix}color-#{$color}) !important;
      border-color: var(--#{variables.$prefix}color-#{$color}) !important;
    }
  }

  @include mixins.m(small) {
    --horizontal-space: var(--#{variables.$prefix}input-horizontal-space, var(--#{variables.$prefix}horizontal-space-small));
    --font-size: var(--#{variables.$prefix}input-font-size, var(--#{variables.$prefix}font-size-small));
  }

  @include mixins.m(medium) {
    --horizontal-space: var(--#{variables.$prefix}input-horizontal-space, var(--#{variables.$prefix}horizontal-space-medium));
    --font-size: var(--#{variables.$prefix}input-font-size, var(--#{variables.$prefix}font-size-medium));
  }

  @include mixins.m(large) {
    --horizontal-space: var(--#{variables.$prefix}input-horizontal-space, var(--#{variables.$prefix}horizontal-space-large));
    --font-size: var(--#{variables.$prefix}input-font-size, var(--#{variables.$prefix}font-size-large));
  }

  @include mixins.e(count) {
    font-variant-numeric: tabular-nums;
    line-height: 28px;
    color: var(--#{variables.$prefix}color-text-sub);
    text-align: right;
  }
}
